<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>显示面板</title>
  <!--基础样式-->
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: base-css"></th:block>
  <!--主题色-->
  <th:block th:include="common/pub_head :: theme-blue"></th:block>

  <link type="text/css" rel="stylesheet" href="../assets/font/log/iconfont.css"/>
  <style>
    .bor_view {
      height: 400px
    }

    .table_show th, tr {
      text-align: center;
    }

    .echart_view {
      border: 1px solid #ddd;
      width: 434px;
      height: 190px;
      padding: 8px;
    }

    .echart-close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 999;
      cursor: pointer;
      color: #d2d2d2;
    }

    .pagination {
      margin: 0px;
    }
  </style>
</head>

<body>
<div class="wrapper-content">
  <div class="box">
    <div class="box-header with-border">
      <div class="box-title dec_1 theme-border-left">显示面板<i class='iconfont slice33'></i></div>
    </div>
    <div class="box-body">
      <div class="input-group fl col-xs-7" style="margin-top:0px; positon:relative">
        <input type="text" id="echartNameQuery" class="form-control" placeholder="请输入面板名称"/>
        <span class="input-group-btn">
           <button class="btn btn-info btn-search" onclick="$('#table').bootstrapTable('refresh')">
             <i class="iconfont icon-sousuo"></i>查找</button>
        </span>
      </div>
      <!-- 表格 -->
      <div class="fr mt15 mb10">
        <button type="button" class="btn btn-primary" data-toggle="modal" onclick="addVisualizePanelEchart()"
                id="add_btn">
          <span class="glyphicon glyphicon-plus"></span>
          添加
        </button>
        <button type="button" class="btn btn-danger" onclick="batchDelVisualizePanelEchart()">
          <span class="glyphicon glyphicon-remove"></span>
          删除
        </button>
      </div>
      <table id="table"></table>
    </div>
  </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="Modal_view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg" style="margin-top: 5px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h5 class="modal-title" id="myModalLabel">添加面板</h5>
      </div>
      <div class="modal-body " style="min-height: 300px;">

        <form role="form" class="form-horizontal row">
          <input type="hidden" id="id"/>
          <div class="row">
            <div class="form-group">
              <label class="col-sm-2 control-label">
                图表名称:</label>
              <div class="col-sm-4">
                <input type="text" class="form-control input-sm" id="echartName" placeholder="请输入图表名称"/>
              </div>
              <div class="col-sm-1" style="padding-left: 0px">
                <button type="button" onclick="pageSelectEchart();"
                        class="btn btn-primary" style="margin-top: -1px;line-height: 1.3">查找
                </button>
              </div>
              <label class="col-sm-2 control-label">
                面板名称:</label>
              <div class="col-sm-3">
                <input type="text" class="form-control input-sm" id="panelName"
                       onkeyup="throttle(hasExistPanelName)" placeholder="请输入面板名称"/>
                <div style="position: absolute;top: 8px; right: -3px"><b class="mr5 red500" id="existFlag">*</b></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="mb10 red-tip">
              请选择面板要显示的图表(每选择一个，便会在下方显示出对应的图表统计图)--默认每页4条
              <div id="pagination-ele" style="position: absolute;top: 40px;right: 16px;"></div>
            </div>
            <div style="height: 135px;border: 1px solid #ddd;border-radius: 4px">
              <table border="1" class="table_show" id="tableShow">
                <thead>
                <tr>
                  <th style="width: 50px"></th>
                  <th data-field="echartName">图表名称</th>
                  <th data-field="multiIndex">所属项目</th>
                  <th data-field="typePo" style="width: 100px;">图表类型</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 图表显示 -->
          <div class="row">
            <div class="col-md-6" style="padding: 0px;margin: 0px">
              <i class="glyphicon glyphicon-remove echart-close"></i>
              <div class="echart_view"></div>
            </div>
            <div class="col-md-6" style="padding: 0px;margin: 0px">
              <i class="glyphicon glyphicon-remove echart-close"></i>
              <div class="echart_view"></div>
            </div>
            <div class="col-md-6" style="padding: 0px;margin: 0px">
              <i class="glyphicon glyphicon-remove echart-close"></i>
              <div class="echart_view"></div>
            </div>
            <div class="col-md-6" style="padding: 0px;margin: 0px">
              <i class="glyphicon glyphicon-remove echart-close"></i>
              <div class="echart_view"></div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary modal-btn" id="saveBtn" onclick="saveVisualizePanelEchart()">保存
        </button>
        <button type="button" class="btn btn-primary modal-btn" id="modifyBtn" onclick="modifyVisualizePanelEchart()">
          修改
        </button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div><!-- /.modal -->
<!-- 详情弹出框 -->
<div class="info_content" id="info_content" style="display: none">
  <div class="row">
    <div class="col-sm-6">
      <div class="info_block">
        <p class="info_text">统计图表名称：</p>
        <div id="show_info_line" class="show_info"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="info_block">
        <p class="info_text">统计图表名称：</p>
        <div id="show_info_pie" class="show_info"></div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="info_block">
        <p class="info_text">统计图表名称：</p>
        <div id="show_info_bar" class="show_info"></div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="common/pub_head :: echart"></th:block>
<link rel="stylesheet" type="text/css" href="../assets/css/page_data.css"/>
<script type="text/javascript" src="../assets/js/echart.config.js"></script>
<script>
  /*<![CDATA[*/
  function hasExistPanelName() {
    var panelName = $("#panelName").val();
    var formData = {
      "panelName": panelName
    };

    var URL = "hasExistPanelName";

    if (hisPanelName != "" && hisPanelName == panelName) {
      $("#existFlag").html("");
      $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");
    } else if (panelName.split(" ").join("") == "") {
      $("#existFlag").html("*");
      $("#existFlag").attr("class", "mr5 red500");
    } else {
      $.post(URL, formData, function (jsonData) {
        var flag = jsonData.flag;

        if (flag) {
          $("#existFlag").html("");
          $("#existFlag").attr("class", "mr5 glyphicon glyphicon-remove red500");
        } else {
          $("#existFlag").html("");
          $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");
        }
      }, "json");
    }
  }

  function throttle(method) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
      method.call();
    }, 200);
  }

  function batchDelVisualizePanelEchart() {
    var selections = $("#table").bootstrapTable("getSelections");
    var id = [];
    for (var i = 0; i < selections.length; i++) {
      id.push(selections[i].id);
    }

    if (id.length == 0) {
      layer.alert("尚未选择，不能执行该操作！");

      return;
    }

    delVisualizePanelEchart(id + "");
  }

  function modifyVisualizePanelEchart() {
    var clazz = $("#existFlag").attr("class");
    var panelName = $("#panelName").val();
    if (panelName.split(" ").join("") == "") {
      layer.msg('面板名称不能为空！', {icon: 2});

      return;
    }
    if (clazz.indexOf("red500") != -1) {
      layer.msg('面板名称已经存在！', {icon: 2});

      return;
    }


    var id = $("#id").val();

    var formData = {
      "id": id,
      "panelName": panelName,
      "echartId": selectArr + ""
    };

    var selectFlag = true;
    for (var i = 0; i < selectArr.length; i++) {
      if (selectArr[i] > -1) {
        selectFlag = false;
      }
    }
    if (panelName == "") {
      layer.alert("面板名称不能为空");

      return;
    }
    if (selectFlag) {
      layer.alert("请选择图表");

      return;
    }

    var URL = "modifyVisualizePanelEchart";

    $.post(URL, formData, function (jsonData) {
      var flag = jsonData.flag;

      if (flag) {
        $('#Modal_view').modal('hide');
        $("#table").bootstrapTable("refresh");
        layer.msg('修改成功！', {icon: 1, time: 1000});
      } else {
        layer.msg('修改失败！', {icon: 2});
      }
    }, "json");
  }

  var hisPanelName = "";

  function editVisualizePanelEchart(id) {
    var index = layer.load();
    var URL = "editVisualizePanelEchart/" + id;
    $.post(URL, {}, function (jsonData) {

      selectArr = $(".echart_view").map(function () {
        return -1;
      }).get();

      var panelRelEchartList = jsonData.panelRelEchartList;
      for (var i = 0; i < panelRelEchartList.length; i++) {
        selectArr[panelRelEchartList[i].sort] = panelRelEchartList[i].echartId;
      }

      $("#Modal_view").html(myModalClone.html());
      initEchart();
      options.currentPage = 1;

      for (var i = 0; i < panelRelEchartList.length; i++) {
        selectArr[panelRelEchartList[i].sort] = panelRelEchartList[i].echartId;
      }
      pageSelectEchart();

      for (var i = 0; i < selectArr.length; i++) {
        if (selectArr[i] > -1) {
          editVisualizeEchart(selectArr[i], i);
        }
      }

      $("#id").val(jsonData.visualizePanelEchartBean.id);
      $("#panelName").val(jsonData.visualizePanelEchartBean.panelName);
      hisPanelName = jsonData.visualizePanelEchartBean.panelName;
      $("#existFlag").html("");
      $("#existFlag").attr("class", "mr5 glyphicon glyphicon-ok green");

      $('#Modal_view').modal('show');

      $(".modal-btn").hide();
      $("#modifyBtn").show();
      $("#myModalLabel").html("修改面板");

      layer.close(index);
    }, "json");
  }

  function delVisualizePanelEchart(id) {
    var URL = "delVisualizePanelEchart";
    var formData = {
      "id": id
    };

    layer.confirm("确定要删除数据吗？", function () {
      $.post(URL, formData, function (jsonData) {
        var flag = jsonData.flag;
        if (flag) {
          $('#Modal_view').modal('hide');
          $("#table").bootstrapTable("refresh");
          layer.msg('删除成功！', {icon: 1, time: 1000});
        } else {
          layer.msg('删除失败！', {icon: 2});
        }
      }, "json");
    });
  }

  function saveVisualizePanelEchart() {
    var clazz = $("#existFlag").attr("class");
    var panelName = $("#panelName").val();
    if (panelName.split(" ").join("") == "") {
      layer.msg('面板名称不能为空！', {icon: 2});

      return;
    }
    if (clazz.indexOf("red500") != -1) {
      layer.msg('面板名称已经存在！', {icon: 2});

      return;
    }

    var formData = {
      "panelName": panelName,
      "echartId": selectArr + ""
    };

    var selectFlag = true;
    for (var i = 0; i < selectArr.length; i++) {
      if (selectArr[i] > -1) {
        selectFlag = false;
      }
    }
    if (panelName == "") {
      layer.alert("面板名称不能为空");

      return;
    }
    if (selectFlag) {
      layer.alert("请选择图表");

      return;
    }

    var URL = "saveVisualizePanelEchart";

    $.post(URL, formData, function (jsonData) {
      var flag = jsonData.flag;

      if (flag) {
        $('#Modal_view').modal('hide');
        $("#table").bootstrapTable("refresh");
        layer.msg('保存成功！', {icon: 1, time: 1000});
      } else {
        layer.msg('保存失败！', {icon: 2});
      }
    }, "json");
  }

  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var options = {
    containerClass: "pagination",
    currentPage: 1,
    numberOfPages: 5,
    totalPages: 5,
    prev: "上一页",
    next: "下一页",
    itemTexts: function (type, page, current) {
      switch (type) {
        case "first":
          return "首页";
        case "prev":
          return "上一页";
        case "next":
          return "下一页";
        case "last":
          return "尾页";
        case "page":
          return page;
      }
    },
    pageUrl: function (type, page) {
      return null;
    },
    onPageClicked: function (event, originalEvent, type, page) {
      options.currentPage = page;
      pageSelectEchart();
    },
    onPageChanged: function () {
      // console.log("onPageChanged");
    }
  };
  $("#pagination-ele").bootstrapPaginator(options);

  function pageSelectEchart() {
    var URL = "pageSelectEchart";
    var echartName = $("#echartName").val();
    var formData = {
      "pn": options.currentPage,
      "echartName": echartName
    };

    $.post(URL, formData, function (jsonData) {
      options.totalPages = jsonData.totalPages;
      options.currentPage = jsonData.currentPage;

      var list = jsonData.source;
      var domEle = "";
      var keyArr = $("#tableShow").find("th").map(function () {
        return $(this).attr("data-field")
      }).get();

      var domEle = "";
      for (var i = 0; i < list.length; i++) {
        domEle += "<tr>";
        var checked = "";
        for (var j = 0; j < selectArr.length; j++) {
          if (selectArr[j] == list[i].id) {
            checked = "checked";
          }
        }
        domEle += "<td><input type='checkbox' " + checked + " value='" + list[i].id + "'></td>";
        for (var j = 0; j < keyArr.length; j++) {
          domEle += "<td>" + list[i][keyArr[j]] + "</td>";
        }
        domEle += "</tr>";
      }

      $("#tableShow").find("tbody").html(domEle);

      $("#pagination-ele").bootstrapPaginator(options);
    }, "json");
  }

  $(document).on("click", ".echart-close", function () {
    var $echartDom = $(this).next();
    var index = $echartDom.attr("data-sort");
    var id = $echartDom.attr("data-id");
    var option = echartArr[index].getOption();
    if (option.title && option.title.length > 0) {
      var existFlag = true;
      selectArr[index] = -1;

      $("#tableShow input[type=checkbox]").each(function () {
        if ($(this).val() == id) {
          $(this).click();
          existFlag = false;
        }
      });

      if (existFlag) {
        echartArr[index].dispose();
        echartArr[index] = echarts.init($echartDom.get(0));
        echartArr[index].setOption({});
        $echartDom.attr("data-flag", flag);
        $echartDom.attr("data-id", -1);
      }
    }
  });

  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  // 美工与Modal_view不知道在哪css挂钩，暂时不改命名
  var myModalClone = $("#Modal_view").clone();

  function addVisualizePanelEchart() {
    hisPanelName = "";
    $("#Modal_view").html(myModalClone.html());

    selectArr = $(".echart_view").map(function () {
      return -1;
    }).get();

    options.currentPage = 1;
    pageSelectEchart();
    initEchart();
    $('#Modal_view').modal('show');

    $(".modal-btn").hide();
    $("#saveBtn").show();
    $("#myModalLabel").html("添加面板");
  }

  var echartArr = [];
  var flag = 0;

  function initEchart() {
    var arr = $(".echart_view");
    for (var i = 0; i < arr.length; i++) {
      if (!echartArr[i]) {
        echartArr[i] = echarts.init(arr.eq(i).get(0));
      }
      echartArr[i].setOption({});

      $(arr.eq(i)).attr("data-flag", flag);
      $(arr.eq(i)).attr("data-sort", i);
    }
    // 清空数据
    $(".echart-close").click();
  }

  function getEchartDom(echartDomIndex) {
    if (echartDomIndex && echartDomIndex > -1) {
      return $(".echart_view").eq(echartDomIndex);
    }

    var nullIndexArr = [];
    var indexArr = [];
    $(".echart_view").each(function (i, domEle) {
      var sortIndex = $(this).attr("data-sort");
      var options = echartArr[sortIndex].getOption();
      if (!(options.title && options.title.length > 0)) {
        nullIndexArr.push(i);
      }
      if ($(this).attr("data-flag") == flag) {
        indexArr.push(i);
      }
    });

    if (nullIndexArr.length > 0) {
      return $(".echart_view").eq(nullIndexArr[0]);
    }

    if (indexArr.length > 0) {
      return $(".echart_view").eq(indexArr[0]);
    }
    // 进入下一轮循环
    flag = (flag + 1) % 2;
    return $(".echart_view").eq(0);
  }

  function editVisualizeEchart(id, echartDomIndex) {
    var URL = "editVisualizeEchart/" + id;
    var formData = {};

    var echartDom = getEchartDom(echartDomIndex);
    if (echartDom != null) {
      $.post(URL, formData, function (jsonData) {
        var index = $(echartDom).attr("data-sort");
        $(echartDom).attr("data-flag", (flag + 1) % 2);
        selectArr[index] = id;
        $(echartDom).attr("data-id", id);
        echartArr[index].dispose();
        echartArr[index] = echarts.init($(echartDom).get(0));
        if (jsonData.flag) {
          var type = jsonData.visualizeChartBean.type;

          if (type == "1") {
            optionLine.xAxis.data = jsonData.echartMap.xAxisDataList;
            optionLine.title.text = jsonData.visualizeChartBean.echartName;
            optionLine.series[0].name = jsonData.visualizeChartBean.field;
            optionLine.series[0].data = jsonData.echartMap.seriesDataList;

            echartArr[index].setOption(optionLine);
          } else if (type == "2") {
            optionBar.xAxis.data = jsonData.echartMap.xAxisDataList;
            optionBar.title.text = jsonData.visualizeChartBean.echartName;
            optionBar.series[0].name = jsonData.visualizeChartBean.field;
            optionBar.series[0].data = jsonData.echartMap.seriesDataList;

            echartArr[index].setOption(optionBar);
          } else if (type == "3") {
            optionPie.title.text = jsonData.visualizeChartBean.echartName;
            optionPie.series[0].name = jsonData.visualizeChartBean.field;
            optionPie.series[0].data = jsonData.echartMap.pieSeriesDataList;

            echartArr[index].setOption(optionPie);
          }
        } else {
          var $input = $("#tableShow input[type=checkbox]").filter(function () {
            return $(this).val() == id;
          });
          var txt = $input.parents("td").next().html();
          if (txt != undefined) {
            txt += "的图表损坏";
          } else {
            txt = "id=" + id + "的图表已经不存在";
          }
          var txtDom = "<div style='font-size: 20px;font-weight: bold;color: #ddd;line-height: 174px;vertical-align: center;text-align: center'>" +
             txt + "</div>";
          // 放个空值 占位
          echartArr[index].setOption({title: {text: " "}});
          $(echartDom).prepend(txtDom);
          //layer.msg($input.parents("td").next().html() + "所属的" + jsonData.errorMsg, {icon: 2});
        }

        $.each($(".table_show input[type=checkbox]"), function(index, domEle) {
          if ($(domEle).prop("checked")) {
            var id = $(this).val();
            var flag = true;
            for (var i = 0; i < selectArr.length; i++) {
              if(id == selectArr[i]) {
                flag = false;
              }
            }

            if (flag) {
              $(this).removeAttr("checked");
            }
          }
        });
      });
    }
  }

  // 选中数据 根据echart_view初始化
  var selectArr = [];
  $(document).on("click", ".table_show input[type=checkbox]", function () {
    var selectedFlag = $(this).prop("checked");
    var id = $(this).val();

    if (selectedFlag) {
      editVisualizeEchart(id, -1);
    } else {
      var index = 0;
      $(".echart_view").each(function (i, domEle) {
        if ($(domEle).attr("data-id") == id) {
          index = i;
        }
      });

      echartArr[index].dispose();
      echartArr[index] = echarts.init($(".echart_view").eq(index).get(0));
      echartArr[index].setOption({});
      $(".echart_view").eq(index).attr("data-flag", flag);
      $(".echart_view").eq(index).attr("data-id", -1);
      var sort = $(".echart_view").eq(index).attr("data-sort");
      selectArr[sort] = -1;
    }
  });
  /*]]>*/
</script>

<script>
  /*<![CDATA[*/
  var $table = $('#table');
  $table.bootstrapTable({
    classes: 'table table-hover table-condensed table-bordered table-responsive',
    contentType: "application/x-www-form-urlencoded",
    height: getHeight(),
    url: "pageVisualizePanelEchart",
    striped: true, //隔行变色
    pagination: true,
    singleSelect: false,
    queryParamsType: '',
    queryParams: queryParams,
    sidePagination: "server",//表格分页的位置
    pageNumber: 1,
    pageSize: 10,
    pageList: [10, 20, 50, 100],
    onLoadSuccess: function () {
      $(".bs-checkbox").css({"text-align": "center", "vertical-align": "middle"});
    },
    columns: [{
      checkbox: true,
      width: 50
    }, {
      field: 'id',
      width: 100,
      title: '编号',
      halign: 'center',
      align: 'center',
      valign: 'middle'
    }, {
      field: 'panelName',
      title: '面板名称',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      sortable: true
    }, {
      width: 300,
      field: 'operate',
      title: '操作',
      halign: 'center',
      align: 'center',
      valign: 'middle',
      formatter: operateFormatter
    }
    ]
  });

  function queryParams(params) {
    var sortName = (params.sortName) ? params.sortName.replace(/([A-Z])/g, "_$1").toLowerCase() : "";
    if (sortName == "type_po") {
      sortName = "type";
    }
    var paramMap = {
      "pageSize": params.pageSize,
      "pn": params.pageNumber,
      "echartName": $('#echartNameQuery').val(),
      "sortName": sortName,
      "sortOrder": params.sortOrder
    };

    return paramMap;
  }

  function operateFormatter(value, row, index) {
    return [
      "<a class='btn btn-success' href=\"javascript:editVisualizePanelEchart('" + row.id + "')\" title='修改'>修改</a>",
      "<a class='btn btn-danger' href=\"javascript:delVisualizePanelEchart('" + row.id + "')\" title='删除'>删除</a>"
    ].join('');
  }

  $(window).resize(function () {
    $table.bootstrapTable('resetView', {
      height: getHeight()
    });
  });

  function getHeight() {
    return $(window).height() - 160;
  }

  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var optionLine = {
    title: {
      text: '折线图',
      textStyle: {
        fontSize: 12
      },
      x: 'center'
    },
    grid: {
      y: 30,
      y2: 35,
      x: 45
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      boundaryGap: false,
      data: ["A", "B", "C", "D", "E", "F"],
      axisLabel: {
        show: true,
        formatter: function (val) {
          return val.split(" ").join("\n");
        }
      }

    },
    yAxis: {
      axisLabel: {
        show: true,
        formatter: function (val) {
          if (val >= 100000) {
            val = val / 1000 + "k";
          }
          return val;
        }
      }
    },
    series: [{
      name: '记录',
      type: 'line',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  var optionBar = {
    title: {
      text: '柱状图',
      textStyle: {
        align: 'center',
        fontSize: 12
      },
      x: 'center'
    },
    grid: {
      y: 30,
      y2: 35,
      x: 45
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: ["A", "B", "C", "D", "E", "F"],
      axisLabel: {
        show: true,
        formatter: function (val) {
          return val.split(" ").join("\n");
        }
      }
    },
    yAxis: {
      axisLabel: {
        show: true,
        formatter: function (val) {
          if (val >= 1000000) {
            val = val / 1000 + "k";
          }
          return val;
        }
      }
    },
    series: [{
      name: '记录',
      type: 'bar',
      barMaxWidth: 30,
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  var optionPie = {
    title: {
      text: '饼状图',
      textStyle: {
        align: 'center',
        fontSize: 12
      },
      x: 'left'
    },
    tooltip: {
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    series: [
      {
        name: '记录',
        type: 'pie',
        center: ['50%', '52%'],
        data: [
          {value: 5, name: 'A'},
          {value: 20, name: 'B'},
          {value: 36, name: 'C'},
          {value: 10, name: 'D'},
          {value: 10, name: 'E'},
          {value: 20, name: 'F'}
        ]
      }
    ]
  };
  /*]]>*/
</script>
</body>
</html>